<template>
  <div class="merchant-dashboard">
    <el-row :gutter="20">
      <!-- 统计卡片 -->
      <el-col :span="6" v-for="(stat, index) in statistics" :key="index">
        <el-card class="stat-card" :body-style="{ padding: '20px' }">
          <div class="stat-content">
            <el-icon :size="40" class="stat-icon">
              <component :is="stat.icon" />
            </el-icon>
            <div class="stat-info">
              <div class="stat-value">{{ stat.value }}</div>
              <div class="stat-label">{{ stat.label }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 订单列表 -->
    <el-card class="order-list">
      <template #header>
        <div class="card-header">
          <span>最近订单</span>
        </div>
      </template>
      
      <el-table :data="orders" style="width: 100%" v-loading="loading">
        <el-table-column prop="id" label="订单号" width="180" />
        <el-table-column prop="customer" label="客户" width="120" />
        <el-table-column prop="service" label="服务项目" width="150" />
        <el-table-column prop="amount" label="金额" width="120">
          <template #default="scope">
            ¥{{ scope.row.amount.toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="120">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180" />
        <el-table-column label="操作" fixed="right" width="150">
          <template #default="scope">
            <el-button type="text" @click="handleViewOrder(scope.row)">查看</el-button>
            <el-button type="text" @click="handleEditOrder(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 编辑订单弹窗 -->
    <el-dialog v-model="dialogVisible" title="编辑订单状态" width="30%">
      <el-select v-model="selectedStatus" placeholder="请选择状态">
        <el-option label="待处理" value="待处理"></el-option>
        <el-option label="进行中" value="进行中"></el-option>
        <el-option label="已完成" value="已完成"></el-option>
      </el-select>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmEdit">确定</el-button>
      </template>
    </el-dialog>

    <!-- 查看订单弹窗 -->
    <el-dialog v-model="viewDialogVisible" title="订单详情" width="40%">
      <el-descriptions :column="1" border>
        <el-descriptions-item label="订单号">{{ currentViewOrder.id }}</el-descriptions-item>
        <el-descriptions-item label="预约人">{{ currentViewOrder.customer }}</el-descriptions-item>
        <el-descriptions-item label="宠物信息">{{ currentViewOrder.petInfo }}</el-descriptions-item>
        <el-descriptions-item label="是否上门服务">
          {{ currentViewOrder.isHomeService ? '是' : '否' }}
        </el-descriptions-item>
        <el-descriptions-item label="上门服务地址" v-if="currentViewOrder.isHomeService">
          {{ currentViewOrder.homeAddress }}
        </el-descriptions-item>
        <el-descriptions-item label="预约时间">{{ currentViewOrder.appointmentTime }}</el-descriptions-item>
        <el-descriptions-item label="服务项目">{{ currentViewOrder.service }}</el-descriptions-item>
        <el-descriptions-item label="金额">¥{{ currentViewOrder.amount.toFixed(2) }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="getStatusType(currentViewOrder.status)">
            {{ currentViewOrder.status }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ currentViewOrder.createTime }}</el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <el-button type="primary" @click="viewDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { Money, ShoppingCart, User, Star } from '@element-plus/icons-vue'

export default {
  name: 'MerchantDashboard',
  data() {
    return {
      loading: false,
      statistics: [
        {
          label: '今日收入',
          value: '¥1,234.00',
          icon: 'Money'
        },
        {
          label: '待处理订单',
          value: '12',
          icon: 'ShoppingCart'
        },
        {
          label: '客户数量',
          value: '256',
          icon: 'User'
        },
        {
          label: '好评率',
          value: '98%',
          icon: 'Star'
        }
      ],
      orders: JSON.parse(localStorage.getItem('orders')) || [
        {
          id: 'ORD20240301001',
          customer: '张三',
          petInfo: '金毛犬，3岁',
          isHomeService: true,
          homeAddress: '北京市朝阳区XX街道XX号',
          appointmentTime: '2024-03-01 10:00:00',
          service: '宠物美容',
          amount: 199.00,
          status: '待处理',
          createTime: '2024-03-01 10:00:00'
        },
        {
          id: 'ORD20240301002',
          customer: '李四',
          petInfo: '波斯猫，2岁',
          isHomeService: false,
          homeAddress: '',
          appointmentTime: '2024-03-01 11:30:00',
          service: '宠物寄养',
          amount: 299.00,
          status: '已完成',
          createTime: '2024-03-01 11:30:00'
        },
        {
          id: 'ORD20240301003',
          customer: '王五',
          petInfo: '哈士奇，1岁',
          isHomeService: true,
          homeAddress: '上海市浦东新区XX街道XX号',
          appointmentTime: '2024-03-01 14:20:00',
          service: '宠物训练',
          amount: 399.00,
          status: '进行中',
          createTime: '2024-03-01 14:20:00'
        }
      ],
      dialogVisible: false, // 编辑弹窗是否可见
      currentOrder: null, // 当前编辑的订单
      selectedStatus: '', // 选中的状态
      viewDialogVisible: false, // 查看弹窗是否可见
      currentViewOrder: null // 当前查看的订单
    }
  },
  methods: {
    resetOrders() {
    localStorage.removeItem('orders')
    // 或 localStorage.setItem('orders', JSON.stringify(this.预设orders))
    window.location.reload()
  },
    getStatusType(status) {
      const statusMap = {
        '待处理': 'warning',
        '进行中': 'primary',
        '已完成': 'success',
        '已取消': 'info'
      }
      return statusMap[status] || 'info'
    },
    handleViewOrder(order) {
      console.log('查看订单', order); // 打印订单数据
      this.currentViewOrder = order; // 保存当前查看的订单
      this.viewDialogVisible = true; // 打开弹窗
    },
    handleEditOrder(order) {
      this.currentOrder = order; // 保存当前编辑的订单
      this.selectedStatus = order.status; // 初始化选中的状态
      this.dialogVisible = true; // 打开弹窗
    },
    confirmEdit() {
      if (this.currentOrder) {
        // 更新订单状态
        this.currentOrder.status = this.selectedStatus;
        // 更新订单列表
        this.updateOrders();
        this.dialogVisible = false; // 关闭弹窗
      }
    },
    updateOrders() {
      console.log('更新订单列表:', this.orders); // 打印订单数据
      localStorage.setItem('orders', JSON.stringify(this.orders));
    }
  },
  mounted() {
    const storedOrders = localStorage.getItem('orders');
    console.log('从 localStorage 加载的订单数据:', JSON.parse(storedOrders));
  }
}
</script>

<style scoped>
.merchant-dashboard {
  padding-top: 64px;
}

.stat-card {
  margin-bottom: 20px;
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.stat-icon {
  color: #409EFF;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #909399;
}

.order-list {
  margin-top: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header span {
  font-size: 16px;
  font-weight: bold;
}
</style> 